<template>
    <div class='SOPTemplate'>
        <div class="formArea">
            <el-form :model="createForm" :rules="rules" ref="createForm" label-width="120px" size="mini">
                <el-form-item label="工序编号">
                    <el-input v-model="createForm.processCode" :disabled='disatruebled'></el-input>
                </el-form-item>
                <el-form-item label="工序名称">
                    <el-input v-model="createForm.processName" :disabled='disatruebled'></el-input>
                </el-form-item>
                <div id='partition'>
                    <el-form-item label="分区" :data-id='1'>
                        <div class='fqBox'>
                            <el-form-item label="名称" prop='name1'>
                                <el-input v-model="createForm.name1" :maxlength="120"></el-input>
                            </el-form-item>
                            <el-form-item label=" ">
                                <el-select v-model="createForm.opt1" :disabled='disatruebled'></el-select>
                            </el-form-item>
                        </div>
                        <div class="partitionHandle">
                            <el-tooltip class="item" effect="dark" content="拖拽" placement="top">
                                <span class="iconfont icon-row"></span>
                            </el-tooltip>
                            <span class="sort">
                                <span class="el-icon-caret-top" @click="sortHandle(1, 'up')"></span>
                                <span class="el-icon-caret-bottom" @click="sortHandle(1, 'down')"></span>
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="分区" :data-id='2'>
                        <div class='fqBox'>
                            <el-form-item label="名称" prop='name2'>
                                <el-input v-model="createForm.name2" :maxlength="120"></el-input>
                            </el-form-item>
                            <el-form-item label=" ">
                                <el-select v-model="createForm.opt2" :disabled='disatruebled'></el-select>
                            </el-form-item>
                        </div>
                        <div class="partitionHandle">
                            <el-tooltip class="item" effect="dark" content="拖拽" placement="top">
                                <span class="iconfont icon-row"></span>
                            </el-tooltip>
                            <span class="sort">
                                <span class="el-icon-caret-top" @click="sortHandle(2, 'up')"></span>
                                <span class="el-icon-caret-bottom" @click="sortHandle(2, 'down')"></span>
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="分区" :data-id='3'>
                        <div class='fqBox'>
                            <el-form-item label="名称" prop='name3'>
                                <el-input v-model="createForm.name3" :maxlength="120"></el-input>
                            </el-form-item>
                            <el-form-item label=" ">
                                <el-select v-model="createForm.opt3" :disabled='disatruebled'></el-select>
                            </el-form-item>
                        </div>
                        <div class="partitionHandle">
                            <el-tooltip class="item" effect="dark" content="拖拽" placement="top">
                                <span class="iconfont icon-row"></span>
                            </el-tooltip>
                            <span class="sort">
                                <span class="el-icon-caret-top" @click="sortHandle(3, 'up')"></span>
                                <span class="el-icon-caret-bottom" @click="sortHandle(3, 'down')"></span>
                            </span>
                        </div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="btn">
            <el-button type="primary" plain size="small" @click="$router.push('/basicData/procedure')">取消
            </el-button>
            <el-button type="primary" size="small" @click="save">保存</el-button>
        </div>
    </div>
</template>

<script>
import {
    sopDetail,
    sopEdit
} from '@/api/baseController'
import Sortable from "sortablejs"
export default {
    data() {
        return {
            createForm: {
                processCode: '', 
                processName: '',
                name1: '',
                name2: '',
                name3: '',
                opt1: '',
                opt2: '',
                opt3: '',
            },
            // 表单校验规则
            rules: {
                name1: [{
                    required: true,
                    message: '名称不能为空',
                    trigger: 'blur'
                }],
                name2: [{
                    required: true,
                    message: '名称不能为空',
                    trigger: 'blur'
                }],
                name3: [{
                    required: true,
                    message: '名称不能为空',
                    trigger: 'blur'
                }],
            },
            disatruebled: true,
            partitionSort: [1,2,3]
        }
    },
    mounted() {
        this.getSopDetail({ id: 0 })
        this.dragDrop()
    },
    methods: {
        getSopDetail(data) {
            sopDetail(data).then(res => {
                let arr = res.data.vos
                this.createForm.processCode = res.data.processCode
                this.createForm.processName = res.data.processName
                this.createForm.name1 = arr[0].name
                this.createForm.name2 = arr[1].name
                this.createForm.name3 = arr[2].name
                this.createForm.opt1 = arr[0].down[0].name
                this.createForm.opt2 = arr[1].down[0].name
                this.createForm.opt3 = arr[2].down[0].name
                this.createForm.id = res.data.id
            })
        },
        getSopEdit(data) {
            sopEdit(data).then(res => {
                if(res.code == 200) {
                    this.$router.push('/basicData/procedure')
                    this.utils.showMsg('编辑成功', 'success')
                }
            })
        },
        //保存
        save() {
            this.$refs.createForm.validate((valid) => {
                if (valid) {
                    let data = {
                        id: 0,
                        processCode: this.createForm.processCode,
                        processName: this.createForm.processName,
                        vos: []
                    }
                    this.partitionSort.map(item => {
                        data.vos.push({
                             name: this.createForm['name' + item],
                            down:[{
                                name: this.createForm['opt' + item]
                            }]
                        })
                    })
                   this.getSopEdit(data)
                } else {
                    return false;
                }
            });
        },
        // 拖拽
        dragDrop() {
            const _this = this
            let el = document.getElementById('partition')
            Sortable.create(el, {
                animation: 150,
                onEnd({
                    newIndex,
                    oldIndex
                }) {
                    const currRow = _this.partitionSort.splice(oldIndex, 1)[0]
                    _this.partitionSort.splice(newIndex, 0, currRow)
                }
            })
        },
        // 分区排序
        sortHandle(n, type) {
            let el = document.getElementById('partition')
            let ind = this.partitionSort.findIndex(res => { return res == n })
            let currRow = null
            if(type == 'up' && ind != 0) {
                currRow = this.partitionSort.splice(ind, 1)[0]
                this.partitionSort.splice(ind-1, 0, currRow)
            } else if(type == 'down' && ind != 2) {
                currRow = this.partitionSort.splice(ind, 1)[0]
                this.partitionSort.splice(ind+1, 0, currRow)
            }
            var sortable = Sortable.create(el)
            sortable.sort(this.partitionSort)
        }
    }
}
</script>

<style lang="less" scoped>
    .SOPTemplate {
        overflow: auto;
        .formArea {
            width: 420px;
            padding: 40px 0px 0px 7px;
            #partition {
                width: 720px;
            }
            .fqBox {
                width: 600px;
                height: 134px;
                border: 1px solid #e5e5e5;
                border-radius: 2px;
                padding: 16px 180px 8px 0;
                position: relative;
            }
            .partitionHandle {
                position: absolute;
                top: 2px;
                right: 5px;
                display: flex;
                align-items: center;
                > span {
                    display: flex;
                    color: rgb(2, 185, 128);
                    cursor: pointer;
                }
                .sort {
                    flex-wrap: wrap;
                    width: 15px;
                    margin-left: 5px;
                    span {
                        width: 9px;
                        height: 9px;
                        font-size: 10px;
                    }
                }
            }
            .partition {
                width: 600px;
                min-height: 134px;
                border: 1px solid #e5e5e5;
                border-radius: 2px;
                padding: 16px 180px 8px 0;
                position: relative;
                .del {
                    position: absolute;
                    top: 0;
                    right: -32px;
                    color: red !important;
                }
                .addName {
                    color: #02b980;
                }
            }
            .addPartition {
                border: 1px dotted #02b980;
                color: #02b980;
                width: 600px;
                height: 28px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
        }

        .productTask {
            margin: 60px 40px 0px;

            .operate {
                span {
                    font-size: 12px;
                    float: left;
                }

                .operate_btn {
                    float: right;
                }

                margin-bottom: 10px;
            }

            .btn {
                margin: 26px 0;
                text-align: center;

                /deep/ .el-button--primary span {
                    margin-left: 0;
                }
            }
        }

        .btn {
            margin: 0 0 0 60px;
            text-align: center;
            display: inline-block;
            width: 420px;

            /deep/ .is-plain {
                margin-right: 10px;
            }

            /deep/ .el-button--primary {
                width: 130px;
                span {
                    margin-left: 0;
                }
            }
        }

        /deep/ .el-input-number--mini {
            width: 100%;
        }

        /deep/ .el-autocomplete {
            width: 100%;
        }

        /deep/ .el-range-editor--mini.el-input__inner {
            width: 100%;
        }

        /deep/ .el-table__empty-text {
            .el-empty {
                padding: 0;
            }
        }

        /deep/ .el-empty__image {
            height: 60px;
        }

        /deep/ .el-empty__image svg {
            vertical-align: text-top;
        }

        /deep/ .el-empty__description {
            margin-top: 10px;
        }

        /deep/ .el-range-editor.el-input__inner {
            width: 100%;
        }

        /deep/ .el-range-editor .el-range-input {
            flex: 7;
        }

        /deep/ .el-date-editor .el-range-separator {
            flex: 1;
        }

        /deep/ .el-input-group__append {
            background-color: #02b980;
            color: white;
        }
        /deep/ .el-input__inner {
            text-align: left;
        }
        /deep/ .el-select {
            width: 100%;
        }
        /deep/ .el-button--mini {
            padding: 0;
            font-size: 16px;
            border-radius: 3px;
            margin-right: 5px;
            border: none;
            color: #02b980;
        }
    }
</style>